<template>
  <div v-if="Data">
    <breadcrumb></breadcrumb>
    <div class="header">
      <div class="stateBox" v-if="certStatus.value == 1">
        <div class="circle">
          <i class="iconfontcolor icon-dairenzheng iconState"></i>
        </div>
        <div class="titleBox">
          <div class="title">待审核</div>
          <div class="text_box">
            <div class="text">认证类型：供应商认证</div>
            <div class="text">创建人：{{ Data.createBy }}</div>
            <div class="text">创建时间：{{ Data.createTime }}</div>
          </div>
        </div>
      </div>
      <div class="stateBox" v-if="certStatus.value == 2">
        <div class="circle">
          <i class="iconfontcolor icon-renzhengtongguo iconState"></i>
        </div>
        <div class="titleBox">
          <div class="title">{{ Data.supplierName }}</div>
          <div class="text_box">
            <div class="text">创建人：{{ Data.createBy }}</div>
            <div class="text">创建时间：{{ Data.createTime }}</div>
          </div>
        </div>
      </div>
      <div class="stateBox" v-if="certStatus.value == 3">
        <div class="circle">
          <i class="iconfontcolor icon-butongguo iconState"></i>
        </div>
        <div class="titleBox">
          <div class="title">不通过</div>
          <div class="text_box">
            <div class="text">认证类型：供应商认证</div>
            <div class="text">创建人：{{ Data.createBy }}</div>
            <div class="text">创建时间：{{ Data.createTime }}</div>
          </div>
        </div>
      </div>

      <div class="stateBox" v-if="false">
        <div class="iconfontcolor icon-chuangjiandingdan"></div>
        <div class="infoBox">
          <div class="info_line1">
            <h3 class="tit">DD2023040814273801</h3>
            <div class="tag">已派车</div>
          </div>
          <div class="info_line2">
            <div style="margin-right: 15px">创建时间：2023-05-24 10:15:15</div>
            <div>下单人：长安民生物流</div>
          </div>
        </div>
      </div>
      <!--认证后 start  -->
      <div class="titleBox" v-if="false">
        <div class="iconfontcolor icon-dairenzhenggongyingshang"></div>
        <div class="infoBox">
          <div class="info_line1">
            <h3 class="tit">重庆祥云运输有限公司</h3>
            <div class="tag">认证成功</div>
          </div>
          <div class="info_line2">
            <div style="margin-right: 15px">创建时间：2023-05-24 10:15:15</div>
            <div>创建人：张其洋</div>
          </div>
        </div>
      </div>
      <div class="button_group" v-if="certStatus.value == 2">
        <button class="notAdopt_btn" @click="$router.back()">返回</button>
        <button class="notAdopt_btn" @click="deleteSupplierById(Data.supplierId)">
          删除
        </button>
        <button class="adopt_btn" @click="
          $router.push({
            path: '/supplierManagement/supplierList/editSupplier',
            query: { supplierId: $route.params.supplierId },
          })
          ">
          编辑
        </button>
<!--        <button class="adopt_btn">更新日志</button>-->
      </div>

      <div class="button_group" v-if="certStatus.value == 1">
        <button class="notAdopt_btn" @click="openMessageBox(false)">
          不通过
        </button>
        <button class="adopt_btn" @click="openMessageBox(true)">通过</button>
      </div>
    </div>
    <div class="main">
      <el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div class="main_item">
            <div class="infoBox">
              <div class="info_item">
                <titleVue :title="'企业信息'" :lineMarginRight="'0px'"></titleVue>
                <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
                  color: '#939393',
                  fontSize: '12px',
                  fontWeight: 'bold',
                  marginRight: '20px',
                }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                  <el-descriptions-item label="供应商代码">{{
                    Data.supplierCoding
                  }}</el-descriptions-item>
                  <el-descriptions-item label="统一社会信用代码">
                    {{ Data.creditCode }}
                  </el-descriptions-item>
                  <el-descriptions-item label="企业简称">
                    {{ Data.supplierAbbreviation }}
                  </el-descriptions-item>
                  <el-descriptions-item label="法定代表人">{{
                    Data.legalPerson
                  }}</el-descriptions-item>
                  <el-descriptions-item label="推荐部门">{{
                    Data.recommendDepartment
                  }}</el-descriptions-item>
                  <el-descriptions-item label="所属地">{{
                    Data.location
                  }}</el-descriptions-item>
                  <el-descriptions-item label="注册国家">{{
                    Data.registrationCountry
                  }}</el-descriptions-item>
                  <el-descriptions-item label="注册资金">{{ Data.registeredCapital }}元</el-descriptions-item>
                  <el-descriptions-item label="企业性质">{{
                    Data.enterpriseNature
                  }}</el-descriptions-item>
                  <el-descriptions-item label="注册地址" :span="3">{{
                    Data.comAddress
                  }}</el-descriptions-item>
                  <el-descriptions-item label="办公地址" :span="3">{{
                    Data.officeArea
                  }}</el-descriptions-item>
                  <el-descriptions-item label="经营范围" :span="3">{{
                    Data.businessScope
                  }}</el-descriptions-item>
                  <el-descriptions-item label="营业执照">
                    <div class="picBox">
                      <div class="pic_item">
                        <el-image class="pic" :src="Data.businessLicense" :preview-src-list="[Data.businessLicense]">
                        </el-image>
                      </div>
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item label="供应商承诺书">
                    <div @click="downloadFile" class="colorText"
                      v-if="Data.supplierCommitment != '' && Data.supplierCommitment != null">
                      {{ "附件" + suffixName }}
                    </div>
                    <div v-else>
                      无
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div class="info_item">
                <titleVue :title="'财务信息'" :lineMarginRight="'0px'"></titleVue>
                <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
                  color: '#939393',
                  fontSize: '12px',
                  fontWeight: 'bold',
                  marginRight: '20px',
                }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                  <el-descriptions-item label="收款人名称">{{
                    Data.bankAccountNumber || '--.--'
                  }}</el-descriptions-item>
                  <el-descriptions-item label="开户行">{{
                    Data.openingBank || '--.--'
                  }}</el-descriptions-item>
                  <el-descriptions-item label="开户行账号">{{
                    Data.payeeAccountName || '--.--'
                  }}</el-descriptions-item>
                  <el-descriptions-item label="银行名称">{{
                    Data.subbranchName || '--.--'
                  }}</el-descriptions-item>
                  <el-descriptions-item label="支行名称">{{
                    Data.subbranchName || '--.--'
                  }}</el-descriptions-item>
                  <el-descriptions-item label="分行编码">{{
                    Data.branchCode || '--.--'
                  }}</el-descriptions-item>
                  <el-descriptions-item label="分行省市">{{
                    Data.branchCities || '--.--'
                  }}</el-descriptions-item>
                </el-descriptions>
              </div>
              <div class="info_item">
                <titleVue :title="'联系信息'" :lineMarginRight="'0px'"></titleVue>
                <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
                  color: '#939393',
                  fontSize: '12px',
                  fontWeight: 'bold',
                  marginRight: '20px',
                }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                  <el-descriptions-item label="公司电话">{{
                    Data.companyTel || '--.--'
                  }}</el-descriptions-item>
                  <el-descriptions-item label="联系人">{{
                    Data.headName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="负责人电话">{{
                    Data.headTel
                  }}</el-descriptions-item>
                  <el-descriptions-item label="负责人邮箱">{{
                    Data.headMail || '--.--'
                  }}</el-descriptions-item>
                </el-descriptions>
              </div>
              <div class="info_item" v-if="certStatus.value == 2">
                <titleVue :title="'认证信息'" :lineMarginRight="'0px'"></titleVue>
                <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
                  color: '#939393',
                  fontSize: '12px',
                  fontWeight: 'bold',
                  marginRight: '20px',
                }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                  <el-descriptions-item label="认证人">{{
                    Data.supplierCertAuditVoList[0].supplierAuditVo.auditUser
                  }}</el-descriptions-item>
                  <el-descriptions-item label="认证时间">{{
                    Data.supplierCertAuditVoList[0].supplierAuditVo.auditTime
                  }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="合同信息" name="second">
          <div class="main_item">
            <div class="infoBox">
              <div class="info_item">
                <titleVue :title="'合同信息'"></titleVue>
                <div class="list">
                  <el-table style="width: 100%" :data="Data.contractInfos">
                    <el-table-column align="center" prop="SerialNumber" label="序号">
                    </el-table-column>
                    <el-table-column prop="contractType" label="合同状态" align="left">
                      <template slot-scope="scope">
                        <div class="contractTag" v-if="scope.row.contractType.value == 1">
                          <div class="dian"></div>
                          <div class="text">合同执行中</div>
                        </div>
                        <div class="contractTag" style="background-color: #dddddd" v-else>
                          <div class="dian" style="background-color: #a8b0b6"></div>
                          <div class="text" style="color: #a8b0b6">
                            合同已到期
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="contractNumber" label="合同编号">
                    </el-table-column>
                    <!-- <el-table-column align="center" prop="contractName" label="合同名称">
                    </el-table-column>
                    <el-table-column align="center" prop="projectName" label="项目名称">
                    </el-table-column> -->
                    <el-table-column align="center" prop="charging" label="计费标准">
                      <template slot-scope="scope">
                        {{ scope.row.charging }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="结算账期">
                      <template slot-scope="scope">
                        {{ scope.row.settlementPeriod
                        }}{{ scope.row.settlementPeriodUnit }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="contractEndTime" label="合同结束日期">
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                      <template slot-scope="scope">
                        <div>
                          <el-button type="text" size="small" @click="
                            showContractDetailDialog(scope.row.contractId)
                            ">详情</el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="常跑线路" name="third">
          <div class="main_item">
            <div class="infoBox">
              <div class="info_item">
                <titleVue :title="'线路信息'"></titleVue>
                <div class="list">
                  <el-table style="width: 100%" :data="Data.supplierLines">
                    <el-table-column align="center" prop="SerialNumber" label="序号">
                    </el-table-column>
                    <el-table-column prop="supplierName" label="路线名称"></el-table-column>
                    <el-table-column align="center" prop="lineStart" label="发货地">
                    </el-table-column>
                    <el-table-column align="center" prop="lineEnd" label="目的地">
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                      <template slot-scope="scope">
                        <div>
                          <el-button type="text" size="small" @click="getRouteDetail(scope.row.lineId)">详情</el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="账号信息" name="fourth">
          <div class="main_item">
            <div class="infoBox">
              <div class="info_item">
                <titleVue :title="'账号信息'"></titleVue>
                <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
                  color: '#939393',
                  fontSize: '12px',
                  fontWeight: 'bold',
                  marginRight: '20px',
                }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                  <el-descriptions-item label="用户名">
                    {{ Data.username }}
                  </el-descriptions-item>
                  <!--                                    <el-descriptions-item label="密码">-->
                  <!--                                        <div class="pswdPhoneBox">-->
                  <!--                                            <span class="pswd">{{ isShowPswd ? pswd : starPswd }}</span>-->
                  <!--                                            <div class="iconBox" @mousedown="showInfo('pswd')" @mouseup="hideInfo('pswd')">-->
                  <!--                                                <i class="iconfont icon-kejian" v-show="!isShowPswd"></i>-->
                  <!--                                                <i class="iconfont icon-bukejian" v-show="isShowPswd"></i>-->
                  <!--                                            </div>-->
                  <!--                                        </div>-->

                  <!--                                    </el-descriptions-item>-->
                  <el-descriptions-item label="手机号" v-if="false">
                    <div class="pswdPhoneBox">
                      <span class="phone">{{
                        isShowPhone ? Data.phoneNumber : starPhone
                      }}</span>
                      <div class="iconBox" @mousedown="showInfo('phone')" @mouseup="hideInfo('phone')">
                        <i class="iconfont icon-kejian" v-show="!isShowPhone"></i>
                        <i class="iconfont icon-bukejian" v-show="isShowPhone"></i>
                      </div>
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 审批进度 -->
      <div class="Approval" v-if="certStatus.value != 2">
        <titleVue :title="'审批进度'" :iconName="'icon-jindu'" :lineMarginRight="'0px'"></titleVue>

        <div class="steps">
          <el-steps direction="vertical" v-for="item in Data.supplierCertAuditVoList" :key="item.auditId">
            <!-- 1 -->
            <el-step>
              <!-- 自定义图标 -->
              <template slot="icon">
                <div class="CircleDian"></div>
              </template>
              <!-- 自定义标题 -->
              <template slot="title">
                <div class="title">
                  <span class="name">{{ item.supplierName }}</span>
                  <span class="promoter">发起人</span>
                  <span class="dateTime">{{ item.createTime }}</span>
                </div>
              </template>
              <!-- 自定义内容 -->
              <template slot="description">
                <div class="content">
                  <div>
                    <strong style="color: #1890ff">发起认证</strong>
                  </div>
                </div>
              </template>
            </el-step>
            <!-- 2 -->
            <template v-if="item.supplierAuditVo.certStatus == 3">
              <el-step>
                <template slot="icon">
                  <div class="CircleDian"></div>
                </template>
                <!-- 自定义标题 -->

                <template slot="title">
                  <div class="title">
                    <span class="name">{{
                      item.supplierAuditVo.supplierName
                    }}</span>
                    <span class="promoter">审批人</span>
                    <span class="dateTime">{{
                      item.supplierAuditVo.createTime
                    }}</span>
                  </div>
                </template>
                <!-- 自定义内容 -->
                <template slot="description">
                  <div class="content">
                    <div>
                      <div style="color: #67c23a" v-show="item.supplierAuditVo.certStatus == 2">
                        通过
                      </div>
                      <div style="color: #f5222d" v-show="item.supplierAuditVo.certStatus == 3">
                        不通过
                      </div>
                      <span v-show="item.supplierAuditVo.certStatus == '3'">认证说明:
                        {{ item.supplierAuditVo.auditFailReason }}</span>
                    </div>
                  </div>
                </template>
              </el-step>
            </template>

            <el-step v-if="item.supplierAuditVo.certStatus == 1">
              <template slot="icon">
                <div class="CircleDian"></div>
              </template>
              <template slot="title">
                <div class="waitAudit">待审核...</div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </div>
    <!-- 合同详情 -->
    <el-dialog class="dialog" title="合同详情" :visible.sync="visibleContractDetail" width="672px">
      <el-descriptions class="descriptionsInfo" :column="2" :labelStyle="{
        color: '#939393',
        fontSize: '12px',
        fontWeight: 'bold',
        marginRight: '20px',
      }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
        <el-descriptions-item label="合同状态">{{
          contract.info
        }}</el-descriptions-item>
        <el-descriptions-item label="合同类型">{{
          contract.contractingPartyType
        }}</el-descriptions-item>
        <el-descriptions-item label="合同编号">{{
          contract.contractNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="合同名称">{{
          contract.contractName
        }}</el-descriptions-item>
        <el-descriptions-item label="对应货主合同">{{
          contract.cargoPactNo
        }}</el-descriptions-item>
        <el-descriptions-item label="项目名称">{{
          contract.projectName
        }}</el-descriptions-item>
        <el-descriptions-item label="计费标准">{{
          contract.charging
        }}</el-descriptions-item>
        <el-descriptions-item label="结算账期">
          {{ contract.settlementPeriod }}{{ contract.settlementPeriodUnit }}
        </el-descriptions-item>

        <el-descriptions-item label="发票类型">
          <span v-if="contract.invoiceType == 0">无需开票</span>
          <span v-else-if="contract.invoiceType == 1">电子发票</span>
          <span v-else-if="contract.invoiceType == 3">增值税发票</span>
          <span v-else-if="contract.invoiceType == 4">普通发票</span>
        </el-descriptions-item>
        <el-descriptions-item label="发票税率">{{
          contract.taxRate
        }}</el-descriptions-item>
        <el-descriptions-item label="合同期限">{{
          contract.contractPeriod
        }}</el-descriptions-item>
        <el-descriptions-item label="保证金">{{
          contract.earnestMoney
        }}</el-descriptions-item>
        <el-descriptions-item label="合同开始日期">{{
          contract.contractStartTime
        }}</el-descriptions-item>
        <el-descriptions-item label="合同结束日期">{{
          contract.contractEndTime
        }}</el-descriptions-item>
        <el-descriptions-item label="合同备注">{{
          contract.contractRemarks
        }}</el-descriptions-item>
        <el-descriptions-item label="附件">
          <div class="colorText" @click="tourl">我是文件名称.pdf</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 线路详情 -->

    <el-dialog title="线路详情" :visible.sync="dialogRouteVisible" width="80%">
      <el-descriptions :column="1" :labelStyle="{
        color: '#262626',
        fontSize: '12px',
        fontWeight: 'bold',
        marginRight: '20px',
        padding: '10px',
      }" :contentStyle="{
  color: '#262626',
  lineHeight: '38px',
  fontSize: '12px',
}">
        <el-descriptions-item label="线路名称">{{
          RouteDetail.lineName
        }}</el-descriptions-item>
        <el-descriptions-item label="发货地">
          <el-table style="width: 100%" size="small" :data="startLine">
            <el-table-column prop="SerialNumber" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="detail" label="详细门牌号">
            </el-table-column>
            <el-table-column prop="contact" label="发货人"> </el-table-column>
            <el-table-column prop="phone" label="发货电话"> </el-table-column>
          </el-table>
        </el-descriptions-item>
        <el-descriptions-item label="收货地">
          <el-table style="width: 100%" size="small" :data="endLine">
            <el-table-column prop="SerialNumber" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="detail" label="详细门牌号">
            </el-table-column>
            <el-table-column prop="contact" label="发货人"> </el-table-column>
            <el-table-column prop="phone" label="发货电话"> </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue.vue";
import httpApi from "@/http";
import store from "@/store";
import NoPassBox from "@/components/NoPassBox";
export default {
  data() {
    return {
      activeName: "first",
      visibleContractDetail: false,
      dialogRouteVisible: false,
      RouteDetail: {}, //路线详情
      startLine: [],
      endLine: [],
      Data: {},
      contract: "",
      supplierCertAuditVoList: [],
      auditVoList: [], //
      lineInfoData: [],
      contractInfoData: [],
      pswd: "1234561",
      starPswd: "",
      isShowPswd: false,
      phone: "",
      starPhone: "",
      isShowPhone: false,
      supplierId: "",
      certStatusValue: "",
      suffixName: "", //供应商承诺文件后缀名
      certStatus: {
        value: "",
        info: "",
      },
    };
  },
  methods: {
    tourl() {
      window.open(this.contract.signImage);
    },
    deleteSupplierById(supplierId) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            supplierIds: supplierId,
          };
          httpApi.supplierManagementApi
            .deleteSupplierById(params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.$router.go(-1);
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取供应商承诺书文件名后缀
    // 获取文件名后缀
    getFileAfter(string) {
      // console.log('字符', string)
      string.lastIndexOf(".");
      // console.log(string.lastIndexOf('.'));
      this.suffixName = string.substring(string.lastIndexOf("."));
      // console.log('后缀', this.suffixName);
    },
    /*     <!-- this.window.open(Data.supplierCommitment) --> */
    downloadFile() {
      window.open(this.Data.supplierCommitment);
    },
    getDetail() {
      // console.log(this.$route.params.supplierId);
      this.supplierId = this.$route.params.supplierId;
      let params = { supplierId: this.supplierId };
      httpApi.supplierManagementApi.getSupplierDetail(params).then((res) => {
        // console.log('全部详情', res)
        this.Data = res.data.data;
        this.certStatus = res.data.data.certStatus

        this.getSerialNumber(this.Data.supplierLines);
        this.getSerialNumber(this.Data.contractInfos);
        // console.log('详情', this.Data);
        // console.log('2222222222', this.Data)
        //this.certStatusValue = res.data.data.certStatus.value
        this.getFileAfter(this.Data.supplierCommitment);

        // console.log('详情111', this.certStatusValue);
        this.supplierCertAuditVoList = res.data.data.supplierCertAuditVoList;
        // console.log(this.supplierCertAuditVoList);
        this.phone = this.Data.phoneNumber;
        this.hidePhonePswd();
      });
    },
    getRouteDetail(lineId) {
      this.dialogRouteVisible = true;
      let params = {
        lineId: lineId,
      };
      httpApi.supplierManagementApi.getRouteItemDetails(params).then((res) => {
        // console.log('路线详情信息', res);
        this.RouteDetail = res.data.data;
        this.startLine = res.data.data.departurePlaceTable;
        this.endLine = res.data.data.destinationPlaceTable;

        this.getSerialNumber(this.lineInfoData);
        this.getSerialNumber(this.startLine);
        this.getSerialNumber(this.endLine);
      });
    },

    handleClick() { },
    getSerialNumber(arr) {
      // 前端解决序号
      arr.forEach((item, i) => {
        let num = i + 1;
        item.SerialNumber = num;
      });
    },
    openInreview() {
      this.$confirm("是否处理该工单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            supplierId: this.supplierId,
            certStatus: "1",
          };
          httpApi.supplierManagementApi
            .waitAuditexamineSupplier(params)
            .then((res) => {
              // console.log('拉入待审核状态结果', res);
            });

          this.$message({
            type: "success",
            message: "待审核中!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消处理",
          });
        });
    },
    openMessageBox(passValue, string) {
      this.showMessageBox = true;

      // true表示通过  false不通过

      if (passValue) {
        //通过
        this.$confirm("是否通过该供应商认证, 是否继续?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = { supplierId: this.supplierId, certStatus: "2" };
            // console.log('参数', params);
            httpApi.supplierManagementApi
              .examineSupplier(params)
              .then((res) => {
                // console.log(res.data);
                if (res.data.code == 200) {
                  // console.log('认证通过结果', res);
                  this.$message({
                    type: "success",
                    message: "认证通过!",
                  });

                  this.$router.push("/supplierManagement/supplierList"); //回到待认证车辆列表
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消",
            });
          });
      } else if (!passValue) {
        const h = this.$createElement;

        this.$msgbox({
          title: "不通过",
          message: h("p", null, [h("NoPassBox", null, null)]),
          showCancelButton: true,
          showClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "NoPassMessageBox",
        })
          .then(() => {
            let params = {
              certStatus: "3",
              auditFailReason: store.state.illustrateValue,
              supplierId: this.supplierId,
            };
            // console.log('params', params);
            httpApi.supplierManagementApi
              .examineSupplier(params)
              .then((res) => {
                // console.log('不通过结果', res);
                this.getDetail();
              });
            this.$message({
              type: "error",
              message: "认证不通过!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消",
            });
          });
      }
    },
    hidePhonePswd() {
      this.starPhone =
        this.phone.substring(0, 3) + "****" + this.phone.substring(7);
      for (let i = 0; i < this.pswd.length; i++) {
        this.starPswd += "*";
      }
    },

    // 切换手机号 密码显示方式
    showInfo(params) {
      if (params == "phone") {
        this.isShowPhone = true;
      } else if (params == "pswd") {
        this.isShowPswd = true;
      }
    },
    hideInfo(params) {
      if (params == "phone") {
        this.isShowPhone = false;
      } else if (params == "pswd") {
        this.isShowPswd = false;
      }
    },
    async showContractDetailDialog(params) {
      let res = await httpApi.supplierManagementApi.getContractDetail({
        contractId: params,
      });
      this.contract = res.data.data;
      this.contract.info = res.data.data.contractType.info;
      // console.log(res.data.data, 1111111111111)
      this.visibleContractDetail = true;
    },
  },
  mounted() {
    this.getDetail();
    this.hidePhonePswd();
  },
  components: {
    breadcrumb,
    titleVue,
    NoPassBox,
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 120px;
  width: 100%;

  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 35px;
  margin-bottom: 14px;

  // 供应商已认证后的标题
  >.titleBox {
    margin-right: 10px;
    flex: 1;
    background-color: #fff;
    height: 119px;
    display: flex;
    align-items: center;

    .icon-chuangjiandingdan {
      font-size: 43px;
      margin-right: 10px;
    }

    .icon-dairenzhenggongyingshang {
      font-size: 43px;
      margin-right: 10px;
    }

    .infoBox {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .info_line1 {
        margin-bottom: 3px;
        display: flex;
        align-items: center;

        >.tit {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          margin-right: 8px;
          color: #262626;
        }

        >.tag {
          background-color: #ecf5fe;
          border-radius: 4px;
          width: 54px;
          height: 20px;
          color: #1890ff;
          font-size: 10px;
          text-align: center;
          line-height: 20px;
        }
      }

      .info_line2 {
        display: flex;
        color: #939393;
        font-size: 12px;
      }
    }

    .deleteBtn {
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      color: #262626;
      font-size: 12px;
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      cursor: pointer;
      margin-left: auto;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }
    }
  }

  // 供应商待认证时的标题
  .stateBox {
    display: flex;
    align-items: center;

    .circle {
      background-color: #f3f7ff;
      width: 78.3px;
      height: 78.3px;
      border-radius: 50%;
      position: relative;
      margin-right: 16px;

      .iconState {
        font-size: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    >.titleBox {
      >.title {
        color: #262626;
        font-size: 16px;
        margin-bottom: 11px;
        font-weight: bold;
        font-family: MicrosoftYaHei-Bold;
      }

      >.text_box {
        display: flex;

        >.text {
          color: #939393;
          font-size: 12px;
          margin-right: 35px;
        }
      }
    }
  }

  .button_group {
    margin-left: auto;

    .notAdopt_btn {
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      height: 36px;
      width: 80px;
      color: #262626;
      font-size: 12px;
      background-color: #fff;
      margin-right: 14px;
      cursor: pointer;
      transition: 0.2s;

      &:hover {
        opacity: 0.8;
        color: #1890ff;
        transition: 0.2s;
        border: 1px solid #1890ff;
      }
    }

    .adopt_btn {
      transition: 0.2s;
      border-radius: 4px;
      height: 36px;
      width: 80px;
      font-size: 12px;
      background-color: #1890ff;
      color: #fff;
      margin-right: 10px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}

.main {
  .mainTabs {
    ::v-deep .el-tabs__nav {
      margin-left: 35px;
    }

    ::v-deep .el-tabs__nav-scroll {
      background-color: #fff;
    }

    // 标签页切换按钮
    ::v-deep .el-tabs__item {
      height: 48px;
      width: 88px;
      text-align: center;
      padding: 0;
      line-height: 48px;
      font-size: 12px;
      font-weight: bold;
      color: #939393;
    }

    ::v-deep .el-tabs__header {
      margin: 0;
    }

    // 下边框
    ::v-deep .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #f0f0f0;
    }

    // 标签页切换按钮 激活样式
    ::v-deep .el-tabs__item.is-active {
      background-color: #ecf5fe;
      color: #1890ff;
    }

    .main_item {
      padding: 35px;
      background-color: #fff;
      min-height: calc(100vh - 308px);

      .infoBox {
        margin-bottom: 8px;

        .info_item {
          margin-bottom: 20px;

          .pswdPhoneBox {
            display: flex;

            .phone {
              width: 78px;
            }

            .iconBox {
              position: relative;
              margin-left: 6px;
              top: -3px;
              height: 17px;

              .icon-kejian {
                font-size: 17px;
                color: #1890ff;
                cursor: pointer;

                &:hover {
                  opacity: 0.8;
                  transition: 0.2s;
                }
              }
            }

            .icon-bukejian {
              font-size: 17px;
              color: #1890ff;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
                transition: 0.2s;
              }
            }
          }

          .list {
            .contractTag {
              width: 87.2px;
              height: 28px;
              font-size: 12px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 4px;
              background-color: #ecf5fe;
              color: #1890ff;
              margin: 0 auto;

              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin-right: 4px;
                background-color: #1890ff;
              }
            }

            ::v-deep .el-table__body-wrapper {
              max-height: calc(100vh - 335px) !important;
              overflow-y: scroll;
            }

            // 表头样式
            ::v-deep .el-table__header th {
              background-color: #f0f6fd;
              color: #262626;
              font-size: 12px;
              font-weight: bold;
              text-align: center;

              // 表 body的td
              ::v-deep .el-table__body td {
                color: #595959;
                font-size: 12px;
              }
            }
          }

          .descriptionsInfo {
            .picBox {
              width: 80px;
              height: 60px;
              border-radius: 6px;

              .pic {
                width: 80px;
                height: 60px;
                object-fit: cover;
              }
            }

            .colorText {
              color: #1890ff;
              font-size: 12px;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
                transition: 0.2s;
              }
            }
          }
        }
      }
    }
  }

  // 审核进度
  .Approval {
    background-color: #fff;
    width: 100%;
    margin-bottom: 26px;
    margin-top: 8px;
    padding: 35px;

    .steps {
      padding: 21px 32px;
      width: 100%;

      // 去组件默认样式
      ::v-deep .el-step__icon.is-text {
        border: none;
      }

      // 修改 连接线颜色
      ::v-deep .el-step.is-vertical .el-step__line {
        background-color: #1890ff;
        width: 2px;
      }

      .CircleDian {
        width: 10px;
        height: 10px;
        background: #1890ff;
        border-radius: 50%;
      }

      //发起人信息
      .title {
        font-size: 12px;
        align-items: center;
        display: flex;
        height: 24px;

        >.name {
          color: #262626;
          margin-right: 7px;
          font-weight: bold;
        }

        .promoter {
          color: #939393;
          margin-right: 7px;
        }

        >.dateTime {
          color: #939393;
        }
      }

      //审核内容
      .content {
        background-color: #fafafa;
        padding: 17px 18px 18px;
        width: 100%;
        font-size: 12px;
        margin: 0px 0 28px;
      }

      .waitAudit {
        font-size: 12px;
        font-weight: bold;
        color: #262626;
      }
    }
  }
}
</style>
